<template>
	<view class="content-item">
		<cc-paging v-model="dataList" :page-size="10" @refresh="onRefresh" @loadmore="onLoadMore" ref="pagingRef">
			<!-- 列表内容 <template v-slot:default="{ data }">-->
			<template #data="{ data }">
				<view v-for="item in data" :key="item.id" class="list-item">
					<view class="header-container">
						<view class="header-left">
							<view class="header-left__store">{{orderMock.stroe.storeName}}</view>
							<view class="comment">{{orderMock.createAt}}</view>
						</view>
						<view class="header-right">
							{{orderMock.status}}
							<text style="font-size: 20rpx;" class="esfont cell__icon--arrow">&#xe6d5;</text>
						</view>
					</view>
					<view class="detail-container">
						<view class="detail-left">
							<view class="goods-card" v-for="detial in orderMock.details">
								<image class="goods-image" :src="detial.image" />
							</view>
						</view>
						<view class="detail-right">
							<view class="detail-right__amount">￥{{orderMock.amount}}</view>
							<view class="comment">共{{orderMock.qty}}件</view>
						</view>
					</view>
					<view class="footer-container">
						<cc-button size="small">再来一单</cc-button>
						<cc-button type="primary" size="small">去支付</cc-button>
					</view>
				</view>
			</template>

			<template #empty>
				<image src="/static/images/common/empty.png" class="empty-image" />
				<view class="empty-tips">您当前还没有订单</view>
				<view class="empty-gomenu">去点单</view>
			</template>
		</cc-paging>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const pagingRef = ref() // 组件引用
	const dataList = ref([]) // 列表数据
	const orderMock = ref({
		orderNo: '202509270033',
		createAt: '2025-09-27 12:26:01',
		status: '已付款',
		amount: 30,
		qty: 8,
		stroe: {
			storeNo: 'NO.001',
			storeName: '中山假日广场店'
		},
		details: [{
				detailId: '20099048473',
				goodsId: '100000000000',
				goodsName: '珍珠奶茶',
				image: '/static/images/products/7.jpg',
				price: 19,
				qty: 1,
				desc: '冰(推荐)，推荐，少甜(推荐)，换绿妍茶底，常规浓度，芭乐云顶(推荐)，标准(不含马蹄丸子)，可降解吸管',
			}, {
				detailId: '20099048473',
				goodsId: '100000000000',
				goodsName: '珍珠奶茶',
				image: '/static/images/products/8.jpg',
				price: 19,
				qty: 1,
				desc: '冰(推荐)，推荐，少甜(推荐)，换绿妍茶底，常规浓度，芭乐云顶(推荐)，标准(不含马蹄丸子)，可降解吸管',
			},
			{
				detailId: '20099048473',
				goodsId: '100000000000',
				goodsName: '珍珠奶茶',
				image: '/static/images/products/7.jpg',
				price: 19,
				qty: 1,
				desc: '冰(推荐)，推荐，少甜(推荐)，换绿妍茶底，常规浓度，芭乐云顶(推荐)，标准(不含马蹄丸子)，可降解吸管',
			},
			{
				detailId: '20099048473',
				goodsId: '100000000000',
				goodsName: '珍珠奶茶',
				image: '/static/images/products/7.jpg',
				price: 19,
				qty: 1,
				desc: '冰(推荐)，推荐，少甜(推荐)，换绿妍茶底，常规浓度，芭乐云顶(推荐)，标准(不含马蹄丸子)，可降解吸管',
			},
			{
				detailId: '20099048473',
				goodsId: '100000000000',
				goodsName: '珍珠奶茶',
				image: '/static/images/products/7.jpg',
				price: 19,
				qty: 1,
				desc: '冰(推荐)，推荐，少甜(推荐)，换绿妍茶底，常规浓度，芭乐云顶(推荐)，标准(不含马蹄丸子)，可降解吸管',
			},
			{
				detailId: '20099048473',
				goodsId: '100000000000',
				goodsName: '珍珠奶茶',
				image: '/static/images/products/7.jpg',
				price: 19,
				qty: 1,
				desc: '冰(推荐)，推荐，少甜(推荐)，换绿妍茶底，常规浓度，芭乐云顶(推荐)，标准(不含马蹄丸子)，可降解吸管',
			}
		]
	})

	// 下拉刷新回调
	const onRefresh = async (pageNo, pageSize) => {
		try {
			const newData = await fetchData(pageNo, pageSize)
			// 请求成功后调用 complete 方法更新状态
			pagingRef.value.complete(newData, 100) // 假设总数100
		} catch (error) {
			// 请求失败调用 fail 方法复位状态
			pagingRef.value.fail()
		}
	}

	// 上拉加载更多回调
	const onLoadMore = async (pageNo, pageSize) => {
		try {
			const newData = await fetchData(pageNo, pageSize)
			pagingRef.value.complete(newData, 100)
		} catch (error) {
			pagingRef.value.fail()
		}
	}

	// 模拟API请求
	const fetchData = (pageNo, pageSize) => {
		return new Promise((resolve) => {
			setTimeout(() => {
				const newData = Array.from({
					length: pageSize
				}, (_, i) => ({
					id: (pageNo - 1) * pageSize + i + 1,
					title: `第${pageNo}页-第${i + 1}条数据`
				}))
				resolve(newData)
			}, 1000)
		})
	}
</script>

<style lang="scss" scoped>
	.content-item {
		width: 100%;
		height: 100%;
		overflow: auto;
		box-sizing: border-box;
		padding: 0rpx 20rpx 20rpx 20rpx;

		.comment {
			font-size: var(--font-xs);
			color: var(--comment-color);
		}

		.list-item {
			padding: 20rpx;
			border-bottom: 1px solid #eee;
			background: #fff;
			display: flex;
			flex-direction: column;
			margin-top: 25rpx;
			gap: 40rpx;

			.header-container {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.header-left {
					display: flex;
					flex-direction: column;
					gap: 5rpx;

					.header-left__store {
						font-size: var(--font-lg);
						color: var(--primary-color);
					}
				}

				.header-right {
					display: flex;
					align-items: center;
					gap: 5rpx;
					font-size: var(--font-sm);
					color: var(--comment-color);
				}
			}

			.detail-container {
				display: flex;
				flex-direction: row;
				gap: 40rpx;

				.detail-left {
					flex: 1;
					display: flex;
					flex-direction: row;
					white-space: nowrap;
					overflow: hidden;
					gap: 10rpx;

					.goods-card {
						width: 120rpx;
						height: 120rpx;
						// 防止图片被压缩
						flex-shrink: 0;
						border-radius: 2rpx;
					}

					.goods-image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.detail-right {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					justify-content: center;
					gap: 10rpx;

					.detail-right__amount {
						font-size: var(--font-lg);
						color: var(--primary-color);
					}
				}
			}

			.footer-container {
				display: flex;
				justify-content: flex-end;
				gap: 15rpx;
			}
		}

		.empty-image {
			width: 360rpx;
			height: 360rpx;
			object-fit: cover;
		}

		.empty-tips {
			margin-top: -25rpx;
			color: var(--comment-color);
			font-size: var(--font-md);
		}

		.empty-gomenu {
			margin-top: 50rpx;
			padding: 15rpx 50rpx;
			font-size: var(--font-lg);
			color: var(--inverse-color);
			background: var(--bg-color);
		}
	}
</style>